<template>
	<view>
		<u-navbar :title="inits.title"></u-navbar>

		<u-tabs active-color="#009943" name="album_cate_text" :list="inits.albumList" v-model="inits.current"
			@change="change" />

		<view style="margin-top: 30rpx;padding: 0 31rpx;" class="flex flex-jc-sb flex-wrap-w">
			<u-image mode="aspectFill" width="334rpx" height="207rpx" class="mb_30"
				v-for="(item,i) in inits.albumList[inits.current].album_images_arr" :src="item" :key="i" @click="previewImage(i)">
			</u-image>
		</view>
		<view class="btn" @click="look">
			<view class="btn-text">查看房型</view>
		</view>
		<view style="height: 200rpx;"></view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import hotel from '../../api/hotel.js';
	const inits = reactive({
		title: '',
		id: null,
		current: 0,
		photo_type: -1,
		albumList: [{
			album_images_arr: []
		}]
	})
	const previewImage = (i) => {
		uni.previewImage({
			current: i,
			urls: inits.albumList[inits.current].album_images_arr,
			loop: true,
		})
	}
	const look = () => {
		uni.navigateBack({
			delta: 2
		})
	}
	const getHotelPhotos = async (current) => {
		const res = await hotel.getHotelPhotos({
			hotel_id: inits.id,
			photo_type: -1
		})
		res.data.map(v => v.album_cate_text = v.album_cate_text+`(${v.album_images_arr.length})`)
		inits.albumList = res.data
		inits.current = current
	}
	const change = (e) => {

	}
	onLoad((op : any) => {
		inits.title = op.title
		inits.id = op.id
		getHotelPhotos(op.current)
	})
</script>

<style lang="scss" scoped>
	.btn {
		height: 192rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -7rpx 6rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 9rpx 9rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;

		.btn-text {
			margin: 38rpx 38rpx 0 38rpx;
			height: 77rpx;
			background: #009943;
			border-radius: 9rpx;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			line-height: 77rpx;
		}
	}
</style>